import React, { useEffect, useState } from 'react';
import { marked } from 'marked';
import hljs from 'highlight.js';
import axios from 'axios';

export default ({ path }) => {

    const [content, setContent] = useState()

    useEffect(() => {
        marked.setOptions({
            renderer: new marked.Renderer(),
            highlight: function(code, lang) {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, { language }).value;
            },
            langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
            pedantic: false,
            gfm: true,
            breaks: false,
            sanitize: false,
            smartypants: false,
            xhtml: false
        });
        axios.request({
            baseURL: '/water',
            url: '/docs/' + path,
            method: 'get',
        }).then(res => {
            setContent(marked(res.data))
        })
    }, []);

    return (
        <div dangerouslySetInnerHTML={{__html: content}}>

        </div>
    );
}